<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <el-aside width="80%" style="border: 1px solid #DCDFE6">
        <el-button icon="el-icon-info" v-on:click="watchXML" class="watchXml">查看xml</el-button>
        <el-button icon="el-icon-download" v-on:click="saveSVG">下载svg</el-button>
        <el-button icon="el-icon-circle-check" v-on:click="submitServer">保存</el-button>
        <div ref="canvas" style="width: 100%;height: 800px">
        </div>
      </el-aside>
      <el-main style="border: 1px solid #DCDFE6;background-color:#FAFAFA ">
        <el-form label-width="auto" size="mini" label-position="top" style="margin-right: 10px;margin-left: 10px">
          <!-- 动态显示属性面板 -->
          <component :is="propsComponent"
                     :modelConfig="modelConfig"
                     :nodeForm="currentNodeForm"
                     :nodeAssignee="currentNodeAssignee"
                     :element="element" :key="key"></component>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
import bpmnHelper from '../js/helper/BpmnHelper';
import BpmData from "../properties/BpmData";
import properties from "@/components/activit/properties";
import BpmnUtils from "./BpmnUtils"
import BpmnModelerMixins from "@/components/activit/components/BpmnModelerMixins";

const forEach = require('lodash/forEach');

export default {
  mixins: [BpmnModelerMixins],
  components: {},
  provide: function () {
    return {
      bpmnModeler: this.getBpmnModeler
    }
  },
  data() {
    return {
      propsComponent: properties.CommonProperties,
      bpmData: new BpmData(),
      bpmnModeler: null,
      bpmnModelerXml: this.bpmnXml,
      canvas: null,
      element: null,
      elementId: null,
      key: '1',
      defaultData: {
        'bpmn:StartEvent': '开始',
        'bpmn:EndEvent': '结束',
        'bpmn:IntermediateThrowEvent': '终止'
      },
      modelConfig: null,
      nodeAssignees: null,
      nodeForms: null,
      currentNodeAssignee: null,
      currentNodeForm: null,
    }
  },


  methods: {
    getCurrentNodeForm() {
      if (!this.elementId) return {};
      if (!this.nodeForms) this.nodeForms = [];
      let elementType = this.element.type;
      if (!BpmnUtils.nodeFormSupportBpmnNodes.includes(elementType)) {
        return {};
      }
      let filters = this.nodeForms.filter(item => item.activitiNodeId === this.elementId);
      let nodeForm = filters.length < 1 ? null : filters[0];
      if (!nodeForm) {
        nodeForm = {};
        nodeForm.activitiNodeId = this.elementId;
        this.nodeForms.push(nodeForm)
      }
      return nodeForm
    },
    getCurrentNodeAssignee() {
      if (!this.elementId) return {};
      if (!this.nodeAssignees) this.nodeAssignees = [];
      let elementType = this.element.type;
      if (!BpmnUtils.nodeAssigneeSupportBpmnNodes.includes(elementType)) {
        return {};
      }
      let filters = this.nodeAssignees.filter(item => item.activitiNodeId === this.elementId);
      let nodeAssignee = filters.length < 1 ? null : filters[0];
      if (!nodeAssignee) {
        nodeAssignee = {};
        nodeAssignee.activitiNodeId = this.elementId;
        this.nodeAssignees.push(nodeAssignee)
      }
      return nodeAssignee
    },

    getBpmnModeler() {
      return this.bpmnModeler
    },
    //保存文档
    watchXML() {
      this.bpmnModeler.saveXML({format: true}, function (err, xml) {
        if (err) {
          console.error('流程数据生成失败');
          console.log(err);
          return;
        }
        console.log(xml);

      });
    },
    saveXML() {
      const that = this;
      that.bpmnModeler.saveXML({format: true}, function (err, xml) {
        if (err) {
          return;
        }
      });

    },
    submitServer() {
      this.bpmnModeler.saveXML({format: true}, (err, xml) => {
        if (err) return;
        let object = {};
        object.bpmnXml = xml;
        object.modelConfig = this.modelConfig
        object.nodeAssignees = this.nodeAssignees;
        object.nodeForms = this.nodeForms;
        this.$emit("submit", object);
      })
    },
    /**
     *
     * @param e
     * @param shape
     */
    eventShapeAdded(e, shape) {
      console.log("eventShapeAdded")

      // console.log('新增了shape');
      // 展示新增图形的属性
      // this.key = e.element.id.replace('_label', '');
      // this.propsComponent = bpmnHelper.getComponentByEleType(shape.type);
      // this.element = e.element;
    },
    eventShapeMoveEnd(e, shape) {
      console.log("eventShapeMoveEnd")
      // console.log('移动了shape')
      // 展示新增图形的属性
      // this.key = shape.id;
      // this.propsComponent = bpmnHelper.getComponentByEleType(shape.type);
      // this.element = e.shape;
    },
    eventShapeRemoved(e, shape) {
      console.log("eventShapeRemoved")
      this.propsComponent = properties.CommonProperties
    },
    eventElementClick(e) {
      console.log("eventElementClick")
      this.elementId = e.element.id
      if (!e || e.element.type === 'bpmn:Process') {
        this.key = '1';
        this.propsComponent = properties.CommonProperties
        this.element = e.element;
      } else {
        // 展示新增图形的属性
        this.key = e.element.id;
        this.propsComponent = bpmnHelper.getComponentByEleType(e.element.type);
        this.element = e.element;
      }
      this.currentNodeAssignee = this.getCurrentNodeAssignee();
      this.currentNodeForm = this.getCurrentNodeForm();
    },
    eventElementChanged(e) {
      console.log("eventElementChanged")
      const id = e.element.id.replace('_label', '');
      let shape = this.getShape(id);
      this.element = shape;
      if (!shape) {
        // 若是shape为null则表示删除, 无论是shape还是connect删除都调用此处
        // console.log('无效的shape')
        // 上面已经用 shape.removed 检测了shape的删除, 要是删除shape的话这里还会被再触发一次
        // console.log('删除了shape和connect')
        return
      }
      if (BpmnUtils.isInvalid(shape.type)) return;
      if (BpmnUtils.isSequenceFlow(shape.type)) return
      this.setDefaultProperties();
    },
    eventElementSelectionChanged(e) {

    },
    saveSVG(call) {
      this.bpmnModeler.saveSVG(function (err, xml) {
        if (err) {
          console.error('流程数据生成失败！');
          return;
        }
        call(xml);
      })
    },

    /**
     * 导入xml文档成功
     * @param modelConfig
     * @param nodeAssignee
     * @param nodeForm
     */
    loadBpmnXmlSuccess(modelConfig, nodeAssignee, nodeForm) {
      if (!modelConfig) modelConfig = {};
      if (!nodeAssignee) nodeAssignee = [];
      if (!nodeForm) nodeForm = [];
      this.modelConfig = modelConfig;
      this.nodeAssignees = nodeAssignee;
      this.nodeForms = nodeForm;
      const elementRegistry = this.bpmnModeler.get('elementRegistry')
      console.log("elementRegistry", elementRegistry)
      this.element = elementRegistry.get('_elements');
      for (const shapeKey in this.bpmnEvents.shape) {
        this.bpmnModeler.on(shapeKey, e => {
          let shape = e.element ? elementRegistry.get(e.element.id) : e.shape
          this.bpmnEvents.shape[shapeKey](e, shape)
        });
      }
      const eventBus = this.bpmnModeler.get('eventBus')
      for (const elementKey in this.bpmnEvents.element) {
        eventBus.on(elementKey, e => this.bpmnEvents.element[elementKey](e))
      }

    },

    setDefaultProperties() {
      // console.log('setDefaultProperties');
      const that = this;
      const {element} = that;
      if (!element) return
      // 这里可以拿到当前点击的节点的所有属性
      const {type, businessObject} = element;
      const {name} = businessObject;
      if (BpmnUtils.verifyIsEvent(type)) {
        const eventType = businessObject.eventDefinitions ? businessObject.eventDefinitions[0]['$type'] : '';
        console.log(eventType);
      } else if (BpmnUtils.verifyIsTask(type)) {
        const taskType = type;
        // console.log(taskType);
      }
      that.element['name'] = name || that.defaultData[element.type]
    },

  },

}

</script>

<style>
* {
  touch-action: pan-y;
}

/*.el-form-item__label {*/
/*  font-size: 13px*/
/*}*/

/*.el-main {*/
/*  padding: 5px*/
/*}*/

/*.el-input--mini .el-input__inner {*/
/*  height: 23px;*/
/*  line-height: 23px;*/
/*}*/

/*.el-form--label-top .el-form-item__label {*/
/*  padding: 0 0 0px;*/
/*}*/

/*.el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label {*/
/*  line-height: 23px;*/
/*}*/

/*.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {*/
/*  margin-bottom: 3px;*/
/*}*/

/*.el-checkbox__label {*/
/*  padding-left: 10px;*/
/*  line-height: 19px;*/
/*  font-size: 13px;*/
/*}*/

/*.el-input__inner {*/
/*  padding: 0 5px;*/
/*}*/

/*.el-textarea__inner {*/
/*  padding: 5px 5px;*/
/*}*/

/*.el-input--mini .el-input__icon {*/
/*  line-height: 23px;*/
/*}*/

/*.saveXml {*/
/*  display: flex;*/
/*  margin-left: 350px;*/
/*}*/
</style>
